<template>
  <div class="top-nav">
    <!-- 左侧品牌区域 -->
    <div class="logo-area">
      <img
          src="../../assets/logo.png"
          alt="商城Logo"
          class="logo-img"
      >
      <span class="site-name">易购商城</span>
    </div>

    <!-- 中间搜索区域（居中显示） -->
    <div class="search-container">
      <div class="search-wrapper">
        <!-- 搜索类型选择 -->
        <el-select
            v-model="selectedType"
            placeholder="商品类型"
            class="search-type"
        >

          <el-option
              v-for="item in searchTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>

        <!-- 搜索输入框（红色边框） -->
        <el-input
            v-model="searchQuery"
            placeholder="请输入搜索内容..."
            class="search-input"
            clearable
            @keyup.enter="handleSearch"
        />

        <!-- 搜索按钮（红色底色） -->
        <el-button
            type="default"
            class="search-btn"
            @click="handleSearch"
        >
          搜索
        </el-button>
      </div>
    </div>

    <!-- 引入独立的用户下拉框组件 -->
    <UserDropdown />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import UserDropdown from '../UserDropdown.vue';
import router from "@/router/index.js";

// 搜索相关
const searchTypes = ref([
  { label: '手机数码', value: '手机数码' },
  { label: '家用电器', value: '家用电器' },
  { label: '美妆个护', value: '美妆个护' },
  { label: '食品生鲜', value: '食品生鲜' },
  { label: '家居家装', value: '家居家装' },
  { label: '图书音像', value: '图书音像' },
  { label: '运动户外', value: '运动户外' },
  { label: '母婴玩具', value: '母婴玩具' },
  { label: '汽车用品', value: '汽车用品' },
  { label: '虚拟服务', value: '虚拟服务' },
  { label: '其他', value: '其他' },
]);
const selectedType = ref('');
const searchQuery = ref('');

// 搜索处理函数
const handleSearch = () => {
const searchParams={
  category:selectedType.value,
  prod_name:searchQuery.value
}
router.push({
  path:'/selectGoodsList',
  query:searchParams  //页面跳转时，下一个界面要用的的参数放在router中
})

};
</script>

<style scoped>
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 确保左右区域不挤压 */
  height: 70px;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 品牌区域样式 */
.logo-area {
  display: flex;
  align-items: center;
  width: 150px;
}

.logo-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 8px;
}

.site-name {
  font-size: 18px;
  font-weight: bold;
  color: #e53e3e; /* 品牌名红色 */
}

/* 搜索区域样式（居中核心） */
.search-container {
  flex: 1; /* 占据中间所有空间 */
  display: flex;
  justify-content: center; /* 水平居中 */
}

.search-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 800px; /* 限制最大宽度 */
}

/* 搜索类型选择器 */
.search-type {
  width: 100px;
  border-right: none;
  border-color: #e53e3e; /* 红色边框 */
}

/* 搜索输入框（红色边框） */
.search-input {
  flex: 1; /* 占据剩余空间 */
  border-left: none;
  border-color: #e53e3e; /* 红色边框 */
}

/* 搜索按钮（红色底色） */
.search-btn {
  background-color: #e53e3e; /* 红色背景 */
  color: white; /* 白色文字 */
  border-color: #e53e3e; /* 红色边框 */
  padding: 0 20px;
}

.search-btn:hover {
  background-color: #c53030; /* hover时加深红色 */
  border-color: #c53030;
}

/* 调整Element Plus默认样式 */
:deep(.el-select .el-input__wrapper) {
  border-radius: 4px 0 0 4px;
  border-right: none;
}

:deep(.el-input__wrapper) {
  border-radius: 0;
  border-left: none;
  border-right: none;
}

:deep(.el-button) {
  border-radius: 0 4px 4px 0;
}

/* 确保用户下拉框有足够空间 */
:deep(.user-dropdown) {
  width: 100px;
  z-index: 9999; /* 防止被遮挡 */
}

/* 响应式适配 */
@media (max-width: 768px) {
  .logo-area {
    width: 80px;
  }

  .site-name {
    display: none; /* 小屏幕隐藏文字 */
  }

  .search-type {
    width: 70px;
  }
}
</style>